<template>
	<view class="login-view">
		<view class="login-header-view">
			<view class="login-form-view">
				<view class="login-form-item">
					<view class="login-form-label">手机号</view>
					<input v-model="form.account" class="login-form-input" placeholder="请输入手机号" type="number"
						placeholder-class="login-form-place" maxlength="11">
				</view>
				<view class="login-form-item">
					<view class="login-form-label">登录密码</view>
					<input v-model="form.password" type="password" class="login-form-input" placeholder="请输入登录密码"
						placeholder-class="login-form-place">
				</view>
				<view class="login-form-item">
					<view class="login-form-label">确认登录密码</view>
					<input v-model="password1" type="password" class="login-form-input" placeholder="请输入确认登录密码"
						placeholder-class="login-form-place">
				</view>
				<view class="login-form-item">
					<view class="login-form-label">支付密码</view>
					<input v-model="form.paypass" type="password" class="login-form-input" placeholder="请输入支付密码"
						placeholder-class="login-form-place">
				</view>
				<view class="login-form-item">
					<view class="login-form-label">确认支付密码</view>
					<input v-model="pay_pass1" type="password" class="login-form-input" placeholder="请输入确认支付密码"
						placeholder-class="login-form-place">
				</view>
				<view class="login-form-item">
					<view class="login-form-label">邀请码</view>
					<input v-model="form.sn" type="text" class="login-form-input" placeholder="请输入邀请码"
						placeholder-class="login-form-place">
				</view>
			</view>

			<view class="with-bottom-view">
				<view class="with-bottom-view1" @click="submitRegister">
					立即注册
				</view>
				<view class="with-bottom-view1" @click="NavigatorLogin" style="margin-top: 80rpx;">
					立即登录
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					account: '',
					password: '',
					paypass:'',
					sn: ''
				},
				password1: '',
				pay_pass1:'',
			}
		},
		onShow() {},
		methods: {
			NavigatorLogin(){
				uni.navigateBack({
					delta:1
				})
			},
			// 获取验证码
			submitRegister() {
				if (!this.form.account) return uni.showToast({
					title: '请输入手机号',
					icon: "error"
				})
				if (!this.form.password) return uni.showToast({
					title: '请输入登录密码',
					icon: "error"
				})
				if (!this.form.paypass) return uni.showToast({
					title: '请输入支付密码',
					icon: "error"
				})
				if(this.form.password !==this.password1)return uni.showToast({
					title: '密码不一致',
					icon: "error"
				})
				if(this.form.paypass !==this.pay_pass1)return uni.showToast({
					title: '支付密码不一致',
					icon: "error"
				})
				this.registerLogin()
			},
			// 注册
			registerLogin() {
				this.$http.post(this.$api.register, this.form).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: '注册成功'
						})
						let path = '/pages/login/login'
						this.$tools.navigateTo(path,200)
					}
				}).catch()
			},
		}
	}
</script>

<style lang="scss">
	.login-form-radio {
		display: flex;
		align-items: center;
	}

	.login-form-label {
		padding: 0 20rpx;
	}

	.login-form-image {
		width: 260rpx;
		height: 80rpx;
	}

	.login-form-invite_code {
		display: flex;

		.login-invite_code-title {
			font-size: 16px;
			font-weight: bold;
			letter-spacing: 4rpx;
			color: #ffffff;
			margin: 20rpx 0rpx 0rpx 50rpx;
			flex-shrink: 0;
		}
	}

	.with-bottom-view {
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		margin-top: 60rpx;

		.with-bottom-view1 {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			padding: 20rpx 0;
			background: #FFF0CA;
			border-radius: 10rpx;
			font-size: 15px;
			color: #333333;
		}
	}

	.forgotPassword {
		font-size: 13px;
		color: #ffffff;
		text-align: right;
		margin-top: 30rpx;
	}

	.login-form-view {
		margin-top: 60rpx;

		.login-form-item {
			background-color: #FFF0CA;
			border-radius: 10rpx;
			padding: 20rpx;
			margin-bottom: 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.login-form-input {
				flex: 1;
				padding: 0 20rpx;
			}

			.login-form-place {
				font-size: 15px;
				color: #999999;
			}

			.login-form-code {
				font-size: 13px;
				color: #2771EB;
				flex-shrink: 0;
				padding-left: 20rpx;
			}
		}

	}

	.login-view {
		background: url('@/static/app/login.png')no-repeat;
		background-size: 100% 100%;
		// background-color: $uni-color-F37F02;
		// background: linear-gradient(180deg, #FFDCB7 0%, rgba(255, 255, 255, 0) 100%);
		height: 100vh;
		position: relative;
	}

	.login-header-view {
		padding: 30rpx;
		position: absolute;
		bottom: 80rpx;
		left: 30rpx;
		width: 92%;
		.login-header-title {
			font-size: 25px;
			font-weight: bold;
			// margin-top: 200rpx;
			color: #333333;
		}

		.login-check-view1 {
			display: flex;
			align-items: center;

			.login-check-view {
				display: flex;
				align-items: center;
				position: relative;

				margin: 60rpx 60rpx 0px 30px;

				.login-check-title {
					font-size: 15px;
					color: #333333;
				}

				.check-icon {
					position: absolute;
					bottom: -10rpx;
					left: 15rpx;
					width: 30rpx;
					height: 8rpx;
					background-color: #2771EB;
				}
			}
		}
	}
</style>